<route lang="json5">
{
  style: {
    navigationStyle: 'default',
    navigationBarTitleText: '农商管理',
  },
}
</route>
<template>
  <div class="pt-5 pb-20 px-8 box-border bg-[#f7f7f7]">
    <div
      v-if="!model.address"
      class="mt-5 mb-5 py-4 box-border rounded-2 w-full flex gap-2 text-[#56b756] justify-center items-center bg-white border border-solid border-[#56b756]"
      @click="getLocation"
    >
      <image src="@/static/images/address.png" mode="widthFix" class="w-[14px]"></image>
      <span>选择注册地址</span>
    </div>
    <div
      v-else
      class="mt-5 mb-5 py-4 px-2 box-border rounded-2 w-full flex gap-2 text-[#666] justify-center items-center bg-white"
    >
      <div class="line-text" style="flex: 1">{{ model.address }}</div>
      <div
        class="py-1 px-2 flex justify-center items-center border border-solid border-[#56b756] rounded-1 text-[#56b756]"
        style="white-space: nowrap"
        @click="getLocation"
      >
        修改
      </div>
    </div>
    <wd-form ref="form" :model="model">
      <wd-cell-group>
        <div class="form-item pb-5 bg-[#f7f7f7]">
          <div class="form-label text-[#666] text-[16px]">详细地址</div>
          <wd-textarea
            label=""
            label-width="100px"
            prop="detailAddress"
            clearable
            custom-textarea-class="ns-textarea"
            v-model="model.detailAddress"
            placeholder="请输入详细地址"
          />
        </div>
        <div class="form-item pb-5 bg-[#f7f7f7]">
          <div class="form-label form-label-required text-[#666] text-[16px]">用户姓名</div>
          <wd-input
            label=""
            label-width="100px"
            prop="name"
            clearable
            disabled
            custom-class="custom-class-content"
            custom-input-class="ns-input"
            v-model="model.name"
            placeholder="请输入用户姓名"
            :rules="[{ required: true, message: '请填写用户姓名' }]"
          />
        </div>
        <div class="form-item pb-5 bg-[#f7f7f7]">
          <div class="form-label form-label-required text-[#666] text-[16px] bg-[#f7f7f7]">
            手机号码
          </div>
          <wd-input
            label=""
            label-width="100px"
            prop="mobile"
            clearable
            disabled
            custom-class="custom-class-content"
            custom-input-class="ns-input"
            v-model="model.mobile"
            placeholder="请输入手机号码"
            :rules="[{ required: true, message: '请填写手机号码' }]"
          />
        </div>
        <div class="form-item pb-5 bg-[#f7f7f7]">
          <div class="form-label form-label-required text-[#666] text-[16px] bg-[#f7f7f7]">
            服务类型
          </div>
          <wd-select-picker
            label=""
            prop="service_type"
            v-model="model.service_type"
            :columns="columns"
            type="checkbox"
            custom-class="ns-select"
            placeholder="请选择服务类型（可多选）"
            :rules="[{ required: true, message: '请选择服务类型' }]"
          />
        </div>
        <div class="form-item pb-5 bg-[#f7f7f7]">
          <div class="form-label form-label-required text-[#666] text-[16px] bg-[#f7f7f7]">
            人员类型
          </div>
          <wd-select-picker
            label=""
            prop="type"
            v-model="model.type"
            :columns="columns2"
            type="radio"
            custom-class="ns-select"
            placeholder="请选择 个人/个体"
            :rules="[{ required: true, message: '请选择 个人/个体' }]"
          />
        </div>
        <div class="form-item pb-5 bg-[#f7f7f7]">
          <div class="form-label form-label-required text-[#666] text-[16px] bg-[#f7f7f7]">
            {{ model.type === '1' ? '上传身份证照片' : '上传营业执照照片' }}
          </div>
        </div>
        <div class="h-[158px] overflow-hidden rounded-2 w-full relative">
          <div
            class="pos-absolute top-0 right-0 z-10"
            style="transform: rotate(45deg)"
            @click.stop="removeImg"
            v-if="model.image_path"
          >
            <image src="@/static/images/add.png" class="w-[20px] h-[20px]" />
          </div>
          <wd-upload
            :file-list="fileListModel"
            :limit="1"
            :action="action"
            custom-preview-class="my-wd-upload__preview"
            image-mode="aspectFill"
            @change="uploadChange"
            disabled
          >
            <wd-upload
              :file-list="fileListModel"
              :limit="1"
              :action="action"
              name="image"
              accept="image"
              custom-preview-class="my-wd-upload__preview"
              image-mode="aspectFill"
              @success="uploadSuccess"
              @change="uploadChange"
            >
              <div class="w-full h-full flex flex-col justify-center items-center relative z-10">
                <image src="@/static/images/add.png" class="w-[20px] h-[20px] mb-5" />
                <div class="upload-tips text-[#ccc]">
                  {{ model.type === '1' ? '上传身份证照片' : '上传营业执照照片' }}
                </div>
              </div>
            </wd-upload>
          </wd-upload>
        </div>
        <!--        <div class="form-item pb-5 bg-[#f7f7f7]">-->
        <!--          <div class="form-label form-label-required text-[#666] text-[16px] bg-[#f7f7f7]">-->
        <!--            {{ model.type === '1' ? '上传身份证照片' : '上传营业执照照片' }}-->
        <!--          </div>-->
        <!--          <div class="upload-box flex justify-center items-center relative" @click="onUploadClick">-->
        <!--            <image src="@/static/images/add.png" class="w-[20px] h-[20px]" />-->
        <!--            <div class="upload-tips text-[#ccc]">-->
        <!--              {{ model.type === '1' ? '上传身份证照片' : '上传营业执照照片' }}-->
        <!--            </div>-->
        <!--            <wd-upload-->
        <!--              :file-list="fileListModel"-->
        <!--              :action="action"-->
        <!--              :limit="1"-->
        <!--              name="image"-->
        <!--              accept="image"-->
        <!--              ref="uploader"-->
        <!--              custom-class="ns-upload"-->
        <!--              reupload-->
        <!--              @change="uploadChange"-->
        <!--              @success="uploadSuccess"-->
        <!--            ></wd-upload>-->
        <!--            <div v-if="image_path_all" class="pos-absolute w-full h-full z-10">-->
        <!--              <image :src="image_path_all" mode="aspectFill"></image>-->
        <!--              <div-->
        <!--                class="pos-absolute top-0 right-0 z-10"-->
        <!--                style="transform: rotate(45deg)"-->
        <!--                @click.stop="removeImg"-->
        <!--              >-->
        <!--                <image src="@/static/images/add.png" class="w-[20px] h-[20px]" />-->
        <!--              </div>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </div>-->
        <!--        <div class="form-item pb-5 bg-[#f7f7f7]">-->
        <!--          <div class="form-label form-label-required text-[#666] text-[16px] bg-[#f7f7f7]">-->
        <!--            人员类型-->
        <!--          </div>-->
        <!--          <wd-select-picker-->
        <!--            label=""-->
        <!--            prop="type"-->
        <!--            v-model="model.type"-->
        <!--            :columns="columns2"-->
        <!--            type="radio"-->
        <!--            custom-class="ns-select"-->
        <!--            placeholder="请选择 个人/个体"-->
        <!--            :rules="[{ required: true, message: '请选择 个人/个体' }]"-->
        <!--          />-->
        <!--        </div>-->
        <!--        <div class="form-item pb-5 bg-[#f7f7f7]">-->
        <!--          <div class="form-label form-label-required text-[#666] text-[16px] bg-[#f7f7f7]">-->
        <!--            上传营业执照照片-->
        <!--          </div>-->
        <!--          <div class="upload-box flex justify-center items-center" @click="onUploadClick">-->
        <!--            <image src="@/static/images/add.png" class="w-[20px] h-[20px]" />-->
        <!--            <div class="upload-tips text-[#ccc]">上传营业执照照片</div>-->
        <!--            <wd-upload ref="uploader" custom-class="ns-upload"></wd-upload>-->
        <!--          </div>-->
        <!--        </div>-->
      </wd-cell-group>
    </wd-form>
    <buttonBtn @btnClick="handleSubmit">
      <view>确认提交</view>
    </buttonBtn>
  </div>
</template>

<script setup lang="ts">
import NsOverlay from '@/components/ns-overlay.vue'
import { completeUserInfo, getServiceType, getUserInfo } from '@/service/user'
import { useToast } from 'wot-design-uni'
const getImg = (url: string) => `${import.meta.env.VITE_SERVER_BASEURL}/${url}`
const model = reactive<RUserInfo>({
  address: '',
  mobile: '',
  service_type: '',
  type: '1',
  image_path: '',
})

const columns = ref<Record<string, any>>([])

const columns2 = ref<Record<string, any>>([
  {
    value: '1',
    label: '个人',
  },
  {
    value: '2',
    label: '个体',
  },
])
const toast = useToast()
const form = ref()
// 提交
function handleSubmit() {
  // console.log(form.value);

  form.value
    .validate()
    .then(async ({ valid, errors }) => {
      if (valid) {
        const formModel = JSON.parse(JSON.stringify(model))
        formModel.service_type = JSON.stringify(formModel.service_type)
        console.log(formModel, '校验通过')
        const res: IResData<any> = await completeUserInfo(formModel)
        if (res.code === 1) {
          toast.success('提交成功')
          setTimeout(() => {
            // uni.navigateBack({ delta: 2 })
            uni.reLaunch({
              url: '/pages/index/index',
            })
          }, 1000)
        }
        // showSuccess({
        //   msg: '校验通过',
        // })
      }
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}
const action = import.meta.env.VITE_UPLOAD_BASEURL
const uploader = ref()
const fileListModel = ref([])
// eslint-disable-next-line camelcase
const image_path_all = ref<string>('')
const uploadChange = ({ fileList }) => {
  fileListModel.value = fileList
}
const removeImg = () => {
  fileListModel.value = []
  model.image_path = ''
  // eslint-disable-next-line camelcase
  // image_path_all.value = ''
}
const uploadSuccess = ({ file, fileList, formData }) => {
  console.log(fileListModel.value, 'fileListModel')
  const response = JSON.parse(file.response)
  console.log(response, 'response')
  model.image_path = response.data.image_path
  // eslint-disable-next-line camelcase
  // image_path_all.value = `${import.meta.env.VITE_SERVER_BASEURL}${response.data.image_path}`
}
const onUploadClick = () => {
  uploader.value?.submit()
}
// 用户信息
const user = ref<RUserInfo>({})
const getInfo = async () => {
  const res: IResData<RUserInfo> = await getUserInfo()
  if (res.code === 1) {
    user.value = res.data
    Object.assign(model, res.data)
    model.service_type && (model.service_type = JSON.parse(model.service_type))
    model.image_path && (fileListModel.value = [{ url: getImg(model.image_path) }])
  }
}
// 服务类型
const serviceTypes = ref<RServiceType[]>([])
const getServiceTypes = async () => {
  const res: IResData<RServiceType[]> = await getServiceType()
  if (res.code === 1) {
    serviceTypes.value = res.data
    columns.value = res.data.map((item: RServiceType) => {
      return {
        value: item.id,
        label: item.title,
      }
    })
  }
}
const serviceType = computed(() => {
  let result = ''
  const RServiceType = user.value.service_type ? JSON.parse(user.value.service_type) : []
  result = serviceTypes.value
    .filter((item) => RServiceType.includes(item.id))
    .map((item) => item.title)
    .join(' ')
  return result
})
// 获取地址
function getLocation() {
  uni.getLocation({
    type: 'gcj02',
    success: function (success) {
      // 选择地点
      uni.chooseLocation({
        latitude: success.latitude,
        longitude: success.longitude,
        success: function (res) {
          model.address = res.address
        },
      })
    },
    fail(result) {
      console.log(result, '获取位置失败')
    },
    complete: function () {},
  })
}
onLoad(async () => {
  await getServiceTypes()
  await getInfo()
})
</script>
<style scoped>
.form-label {
  margin-bottom: 20rpx;
}
.form-label-required {
  position: relative;
  padding-left: 8px;
}

.form-label-required::before {
  content: '*';
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 12px;
  color: #f61515;
}

:deep(.wd-textarea),
:deep(.wd-input) {
  border-radius: 16rpx !important;
}

:deep(.wd-input.is-disabled .wd-input__inner) {
  background: rgba(153, 153, 153, 0.2) !important;
}

:deep(.ns-select .wd-select-picker__cell) {
  padding: 16rpx !important;
  border-radius: 16rpx !important;
}

.upload-box {
  position: relative;
  flex-direction: column;
  gap: 12rpx;
  width: 100%;
  height: 288rpx;
  border-radius: 12rpx;
  overflow: hidden;
  background: #ffffff;
}
/*
:deep(.wd-upload) {
  position: absolute !important;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0;
}

:deep(.wd-upload .wd-upload__evoke) {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
*/
:deep(.wd-upload, .wd-upload__evoke-slot, .wd-upload__evoke) {
  width: 100%;
  height: 100%;
}
</style>
<style>
.wd-upload__evoke-slot {
  width: 100%;
  height: 100%;
}
.my-wd-upload__preview {
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.my-wd-upload__preview image {
  width: 100% !important;
  height: 100% !important;
}
</style>
